<template>
   <div class="out-swipe">
    <div class="swipe">
     <div class="base" v-for="(i, idx) in list" :key="idx"  :class="{ 'active': (idx === 1) }">{{ i }}</div>
    </div>
   </div>
</template>
<script setup lang="ts">

import { ref, onMounted, reactive } from 'vue'

const utilResetArr = (newArr, reactiveArr) => {
  //reactive数组循环添加属性
  reactiveArr.length = 0;
  newArr.forEach((item) => {
    reactiveArr.push(item);
  });
};


const list = reactive([
  '恭喜WY**12获得2.22元红包',
  '恭喜WY**13获得3.22元红包',
  '恭喜WY**16获得4.22元红包',
  '恭喜WY**14获得5.22元红包',
  '恭喜WY**15获得6.22元红包',
  '恭喜WY**17获得7.22元红包',
])

const translateY = ref(0)
const distance = ref(translateY.value + 'px')
const timer = ref(null)

onMounted(() => {
  animation()
})

const animation = async () => {
  timer.value = setInterval(() => {
    moveAndReset().then(() => {
      const item = list.splice(0, 1)
      utilResetArr([...list, ...item], list)
      translateY.value = 0
      distance.value = translateY.value + 'px'
    })
  }, 625)
}

const moveAndReset = () => {
  return new Promise((resolve) => {
    const t2 = setInterval(() => {
      if (translateY.value === -26) {
        clearInterval(t2)
        translateY.value = 0
        resolve(true)
      } else {
        translateY.value--
        distance.value = translateY.value + 'px'
      }
    }, 25)
  })

}



</script>
<style scoped lang="scss">
.out-swipe {
   margin-top: 13px;
   height: 75px;
   overflow: hidden;
}

.swipe {
   transform: translateY(v-bind(distance));

   .base {
    height: 20px;
    border-radius: 12px;
    color: #fff;
      font-size: 9px;
      background: rgba(0, 0, 0, 0.2);
      opacity: 0.5;
      margin-top: 5px;
      display: flex;
      align-items: center;
      width: fit-content;
      padding: 0 10px;
     }

   .active {
      font-size: 11px;
      opacity: 1;
     }
}
</style>




<!--<template>-->
<!--  <div class="container">-->
<!--    <div class="popover">-->
<!--      <div class="popover_item" v-for="(i,idx) in list" :key="idx" :style="{color: idx === 2? 'red' : '#ffffff'}">{{i}}</div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import { computed, onMounted, ref } from "vue";-->
<!--const list = ref([-->
<!--  '恭喜是唐良娟中了一台拖拉机',-->
<!--  '恭喜是沈梦天中了一枚水蜜桃',-->
<!--  '恭喜是沈恩一中了一套练习题',-->
<!--  '恭喜是沈恩羽中了一个小狗子',-->
<!--])-->
<!--const translateY = ref(0)-->
<!--const distance = computed(() => translateY.value + 'px')-->

<!--const timer = ref(null)-->
<!--const animation = async () => {-->
<!--  timer.value = setInterval(() => {-->
<!--    moveAndReset().then(() => {-->
<!--      const item = list.value.splice(0,1)-->
<!--      list.value = [...list.value,...item]-->
<!--      translateY.value = 0-->
<!--    })-->
<!--  },1000)-->
<!--}-->

<!--const moveAndReset = () => {-->
<!--  return new Promise((resolve) => {-->
<!--    const t2 = setInterval(() => {-->
<!--      if(translateY.value === -101){-->
<!--        clearInterval(t2)-->
<!--        translateY.value = 0-->
<!--        resolve()-->
<!--      }else{-->
<!--        translateY.value &#45;&#45;-->
<!--      }-->
<!--    },10)-->
<!--  })-->

<!--}-->
<!--onMounted(() => {-->
<!--  animation()-->
<!--})-->
<!--</script>-->

<!--<style scoped lang="scss">-->
<!--.container{-->
<!--  height:300px;-->
<!--  overflow: hidden;-->
<!--}-->
<!--.popover{-->
<!--  transform: translateY(v-bind('distance'));-->
<!--  //transition-duration: 500ms;-->
<!--  background: rgba(0,0,0,.6);-->
<!--  &_item {-->
<!--    height: 100px;-->
<!--    line-height: 100px;-->
<!--    color:#ffffff;-->
<!--  }-->
<!--}-->
<!--</style>-->